<template>
    <ul>
        
        <li :class="{active:item.isCompleted}" v-for="(item , i) in data" :key="item.id">
            <input type="checkbox" :checked="item.isCompleted" @change="checkChange(item,$event)">
            <b>{{item.todo}}</b>
            <button @click="handledel(i)">删除</button> 
        </li>
    </ul>
    <fieldset>
        <legend>详情</legend>
        <button class="b1" @click="filter('all')">全部:{{allCount}}</button>
        <button class="b1" @click="filter('completed')"> 已完成:{{completedCount}}</button>
        <button class="b1" @click="filter('active')"> 未完成:{{activeCount}}</button>
    </fieldset>
</template>
<script setup>
    import { defineProps, toRefs,defineEmits} from 'vue';
    let props = defineProps(['data','allCount','completedCount','activeCount'])
    let {data} = toRefs(props) 
 
    let emit = defineEmits(['del','getFlag'])
    let handledel = (i)=>{ 
        emit('del',i)
    }

    let checkChange = (item,e)=>{
        console.log(e.target.checked);
        item.isCompleted = e.target.checked
        console.log(item);
        console.log(data);
    }


    let filter = (flag)=>{
        emit('getFlag',flag)
    }
</script>

<style scoped>
    .active{
        background-color: aqua;
    }
    .b1{
        margin:45px;
    }
    ul{
        background-color: pink;
    }
</style>